// 权限管理文件
// 引入路由 和 vuex
import router from '@/router'
import store from '@/store'

// 导入动态路由表
import { asyncRouter } from '@/router'

// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'

import getPageTitle from '@/utils/get-page-title'

// 白名单, 不需要做权限控制的页面
const whiteList = ['/login', '/404']

// 全局前置导航守卫
router.beforeEach(async(to, from, next) => {
  // to：即将要进入的目标
  // from：当前导航正要离开的路由
  // next：next 是一个函数，通常是指放行，next() 直接放行 ，next(路径) 跳转到某一个页面
  // 显示进度条效果
  NProgress.start()

  const token = store.state.user.token

  // 如果存在 token
  if (token) {
    // 且去往登录页,就直接跳到首页, 去别的页面,直接放行
    if (to.path === '/login') {
      next('/')
    } else {
      // 10002 这个是调用相关接口的时候,才会报出错误
      // console.log(to.fullPath)
      router.mylujing = to.fullPath // router.mylujing token失效时的路径参数信息

      if (!store.getters.userId) {
        // store.dispatch 调用vuex里的方法
      // 在这里拿到用于判断显示菜单项的权限数据 menus
        const menus = await store.dispatch('user/getUserInfo')

        // 根据用户实际的权限 menus 从 asyncRoutes 中过滤出用户能访问的页面
        const filterRoutes = asyncRouter.filter(route => {
          const routeName = route.children[0].name
          return menus.includes(routeName)
        })
        // 添加之前,将404,push 到最后   ----- 解决 404bug
        filterRoutes.push(
          { path: '*', redirect: '/404', hidden: true }
        )

        // 添加动态路由
        router.addRoutes(filterRoutes)

        // 调用 Vuex 声明的 方法处理路由
        store.commit('permission/setRoutes', filterRoutes)

        // console.log(to.path, menus)
        if (!menus.includes(to.path.slice(1))) {
          next({
            path: '/',
            replace: true
          })
        } else {
          // 解决页面刷新出现白屏bug
        // 因为是动态路由, 让路由从新再进一次
          next({
          // path: to.fullPath,
            ...to,
            replace: true
          })
        }
      } else {
        next()
      }
    }
  } else {
    // 如果不存在token
    // 但访问的是白名单内的 , 就放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 别的通通去登录页
      next('/login')
    }
  }

  // 隐藏进度条效果
  NProgress.done()
})

// 另一个前置守卫 , 负责对跳转页标题的更改
router.beforeEach(async(to, from, next) => {
  document.title = getPageTitle(to.meta.title)
  next()
})

// 数组.includes(元素)： 检查这个元素在数组中是否存在

// 全局后置导航守卫
router.afterEach((to, from) => {
  // ...
  // 隐藏进度条效果
  NProgress.done()
})
